<%@ page contentType="text/html;charset=UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<c:set var="ctx" value="${pageContext.request.contextPath}" />

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"> 
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> 
  <title>乐直播-硬件管理</title> 
  <link rel="stylesheet" href="http://cdn.lezhibo.com/staticvideoclip/portal/layui/css/layui.css?cdnv=0.16"> 
  <link rel="stylesheet" href="http://cdn.lezhibo.com/staticvideoclip/portal/css/le-main.css?cdnv=0.16"> 
  <link rel="stylesheet" href="http://cdn.lezhibo.com/staticvideoclip/libs/font-awesome-4.7.0/css/font-awesome.min.css?cdnv=0.16"> 
  <link type="text/css" href="http://cdn.lezhibo.com/staticvideoclip/portal/timeshaft/css/jquery-ui.css?cdnv=0.16" rel="stylesheet"> 
  <style type="text/css">
.ui-timepicker-div .ui-widget-header { margin-bottom: 8px; }
.ui-timepicker-div dl { text-align: left; }
.ui-timepicker-div dl dt { height: 25px; margin-bottom: -25px; }
.ui-timepicker-div dl dd { margin: 0 10px 10px 65px; }
.ui-timepicker-div td { font-size: 90%; }
.ui-tpicker-grid-label { background: none; border: none; margin: 0; padding: 0; }
body {width: 100%;overflow: auto;height:100%;}

#le-video {
    width: 720px;
    height: 200px;
    background-color: #ddd;
}
        </style> 
 </head> 
 <body> 
  <div class="layer-plugin layer-plugin1 layer-plugin2 fix"> 
   <div class="layer-box"> 
    <p>选择活动 <a class="layui-btn mr10" href="/videoClip/portal/_videoList?company=09fbf681da48484b9e3b54816fde728a">选择</a> <span>提示：请选择需要剪切成小视频的活动视频</span></p> 
    <div class="le-video-box"> 
     <!--腾讯云视频播放器--> 
     <p></p> 
     <p style="color:red;">开始时间和截止时间不可超出视频范围，否则无法成功生成。</p> 
     <input id="videoDuration" type="hidden" value=""> 
    </div> 
    <form class="layui-form mb30" action="/videoClip/portal/saveV2" method="post" success-func="success()" style="margin: 20px 0"> 
     <input type="hidden" name="fromVideoId" value=""> 
     <input type="hidden" name="cloudVideoId" value=""> 
     <input type="hidden" name="liveroomId" value=""> 
     <input type="hidden" name="companyId" value=""> 
     <input type="hidden" name="thumbnail" value=""> 
     <input type="hidden" name="startTimeOffset" value=""> 
     <input type="hidden" name="endTimeOffset" value=""> 
     <input id="duration" type="hidden" name="duration" value=""> 
     <div class="layui-input-inline m15" style="width:40%;margin-left:0;"> 
      <input type="text" name="title" value="" lay-verify="phone" autocomplete="off" placeholder="输入本段小视频的标题" class="layui-input"> 
     </div> 
     <div class="layui-input-inline m15"> 
      <input type="text" id="startTime" name="fromVideoStarttime" value="" placeholder="开始时间" readonly autocomplete="off" class="layui-input"> 
     </div> 
     <div class="layui-input-inline m15"> 
      <input type="text" id="endTime" name="fromVideoEndtime" value="" placeholder="截止时间" readonly autocomplete="off" class="layui-input"> 
     </div> 
     <div class="layui-input-inline m15"> 
      <button type="button" le-submit class="layui-btn layui-btn-primary layui-btn1" style="margin-bottom: 0;">保存 </button> 
     </div> 
    </form> 
    <table class="le-mall-table le-mall-table1 mt10"> 
     <tbody> 
      <tr class="le-table-title"> 
       <th>标题</th> 
       <th>起始时间</th> 
       <th>结束时间</th> 
       <th>操作</th> 
      </tr> 
     </tbody> 
    </table> 
    <p>提示：根据您的截取操作，即将为您生成 1 段小视频，提交后请在【小视频列表】里查看。</p> 
   </div> 
   <div class="plugin-btn"> 
    <button type="button" class="layui-btn" onclick="closeLayer()"> 提交 </button> 
   </div> 
  </div> 
  <script type="text/javascript" src="http://cdn.lezhibo.com/staticvideoclip/portal/js/jquery.min.js?cdnv=0.16"></script> 
  <script type="text/javascript" src="http://cdn.lezhibo.com/staticvideoclip/portal/js/jquery.form.min.js?cdnv=0.16"></script> 
  <script type="text/javascript" src="http://cdn.lezhibo.com/staticvideoclip/portal/layui/layui.js?cdnv=0.16"></script> 
  <script type="text/javascript" src="http://cdn.lezhibo.com/staticvideoclip/portal/layui/lay/dest/layui.all.js?cdnv=0.16"></script> 
  <script type="text/javascript" src="http://cdn.lezhibo.com/staticvideoclip/portal/timeshaft/js/jquery-ui-1.9.1.min1.js?cdnv=0.16"></script> 
  <script type="text/javascript">
    jQuery.browser = {};
    (function () {
        jQuery.browser.msie = false;
        jQuery.browser.version = 0;
        if (navigator.userAgent.match(/MSIE ([0-9]+)\./)) {
            jQuery.browser.msie = true;
            jQuery.browser.version = RegExp.$1;
        }
    })();
</script> 
  <script type="text/javascript" src="http://cdn.lezhibo.com/staticvideoclip/portal/timeshaft/js/jquery-ui-timepicker-addon.js?cdnv=0.16"></script> 
  <script type="text/javascript" src="http://cdn.lezhibo.com/staticvideoclip/portal/timeshaft/js/jquery-ui-timepicker-zh-CN.js?cdnv=0.16"></script> 
  <!--腾讯云播放器--> 
  <script src="http://qzonestyle.gtimg.cn/open/qcloud/video/h5/h5connect.js" charset="utf-8"></script> 
  <script>

        var cdnPath="http://cdn.lezhibo.com";//cdn路径
        function openLayer(url, title, func) {
            parent.openLayer(url,title,func);
        }
        function layerInit() {
            $("[layer-href]").click(function () {
                openLayer($(this).attr("layer-href"), $(this).attr("layer-title"), $(this).attr("layer-func"))
            });
        }

        $("[confirm-href]").click(function () {
            var href = $(this).attr("confirm-href");
            if ((typeof(href) == "undefined") || href == null || href == "") {
                return;
            }

            var title = $(this).attr("confirm-title");
            if ((typeof(title) == "undefined") || title == null || title == "") {
                title = "您确定执行该操作吗？"
            }
            layer.confirm(title, {icon: 9, title: '确定操作 ？'}, function (index) {
                        layer.close(index);
                        $.get(href, function (result) {
                            if (result.isOk) {
                                location.reload();
                            } else {
                                alert(result.message);
                            }
                        });
                    },
                    function (index) {
                        layer.close(index);
                    });
        });

        var verification ={
            mobiel:function(){
                $mobile = $("input[validate='mobile']").val();
                var re = /^1\d{10}$/;
                if((typeof($mobile)!="undefined") && !re.test($mobile)){
                    $("input[validate='mobile']").after('<p class="le-tips"><span style="color: red;width: 100%">请输入正确的手机号</span></p>');
                    return false;
                }
            },
            empty:function(){
                var $input =$("input[validate='empty']");
                for(var i=0;i<$input.length;i++){
                    if($input.eq(i).val().trim().length==0){
                        $("input[validate='empty']").eq(i).after('<p class="le-tips"><span style="color: red;width: 100%">输入不能为空</span></p>');
                        return false;
                    }
                }

                var $textarea =$("textarea[validate='empty']");
                for(var i=0;i<$textarea.length;i++){
                    if($textarea.eq(i).val().trim().length==0){
                        $("textarea[validate='empty']").eq(i).parent().after('<p class="le-tips"><span style="color: red;width: 100%">输入不能为空</span>/p>');
                        return false;
                    }
                }

                var $select =$("select[validate='empty']");
                for(var i=0;i<$select.length;i++){
                    if($select.eq(i).val().trim().length==0){
                        $("select[validate='empty']").eq(i).parent().after('<p class="le-tips"><span style="color: red;width: 100%">输入不能为空</span></p>');
                        return false;
                    }
                }
            },
            email:function(){
                $email=$("input[validate='email']").val();
                var re = /^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/;
                if((typeof($email)!="undefined") && !re.test($email)){
                    $("input[validate='email']").after('<span class="le-tips"><span style="color: red;width: 100%">请输入正确的邮箱</span></p>');
                    return false;
                }
            },
            password: function () {
                $password = $("input[validate='password']").val();
                var re = /(.+){6,12}$/;
                if ((typeof($password) != "undefined") && !re.test($password)) {
                    $("input[validate='password']").after('<p class="le-tips"><span style="color: red;width: 100%">请输入6到12位密码</span></p>');
                    return false;
                }
            },
            //正整数
            positiveInteger: function () {
                $positiveInteger = $("input[validate='positiveInteger']");
                var re=/^[1-9]\d*|0$/;
                for (var i = 0; i < $positiveInteger.length; i++) {
                    var every=$positiveInteger.eq(i).val().trim();
                    if ((typeof(every) != "undefined") && !re.test(every)) {
                        $("input[validate='positiveInteger']").eq(i).after('<p class="le-tips"><span style="color: red">请输入一个正整数或者0</span></p>');
                        return false;
                    }
                }
            }
         }


        var regularVerify = {
            mobile: function (value) {
                var re = /^1\d{10}$/;
                if ((typeof(value) != "undefined") && !re.test(value)) {
                    return false;
                }
            },
            email: function (value) {
                var re = /^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/;
                if ((typeof(value) != "undefined") && !re.test(value)) {
                    return false;
                }
            },
            password: function (value) {
                var re = /(.+){6,12}$/;
                if ((typeof(value) != "undefined") && !re.test(value)) {
                    return false;
                }
            },
            integer: function (value)     {
//                    var re = /^[1-9]\d*$/;
                var re = /^\d+$/;
                if ((typeof(value) != "undefined") && !re.test(value)) {
                    return false;
                }
            },
            decimal: function (value) {
//                    var re = /^[1-9]\d*\.\d*|0\.\d*[1-9]\d*$/;
                var re = /^[0-9]+\.{0,1}[0-9]{0,2}$/;
                if ((typeof(value) != "undefined") && !re.test(value)) {
                    return false;
                }
            },
            empty: function (value) {
                if (value.trim().length == 0) {
                    return false;
                }
            }
        }


        function leSubmit() {
            $("[le-submit]").click(function () {
                var $form = $(this).parents("form");
                var sfunc = $form.attr("success-func");
                var bfunc = $form.attr("before-func");
                $form.ajaxSubmit({
                    type: "post",
                    dataType: "json",
                    beforeSend: function () {
                        if (bfunc != null) {
                            if (false == eval(bfunc)) {
                                return false;
                            }
                        }
                        $(".le-tips").remove();
                        if (false == verification.empty()) {
                            return false;
                        }
                        if (false == verification.mobiel()) {
                            return false;
                        }
                        if (false == verification.email()) {
                            return false;
                        }
                        if (false == verification.password()) {
                            return false;
                        }
                        if (false == verification.positiveInteger()) {
                            return false;
                        }
                    },
                    success: function (result) {
                        if (sfunc != null) {
                            eval(sfunc);
                            return;
                        }

                        if (result.isOk) {
                            parent.isUpdateData = true;
                            parent.layer.closeAll();
                        } else {
                            layer.alert(result.message);
                        }
                    },
                    error: function () {
                        layer.alert("信息提交错误");
                    }
                });
            });
        }
        //对日期选择范围的控制
        //对id为begin-date和end-date的日期选择控件进行控制
        function verifyDate() {
            layui.use('laydate', function () {
                var laydate = layui.laydate;
                var start = {
                    format: 'hh:mm:ss',
                    istoday: false,
                    istime: true,
                    choose: function (datas) {
                        end.min = datas;    //开始日选好后， 重置结束日的最小日期
                        end.start = datas;  //将结束日的初始值设定为开始日
                    }
                };

                var end = {
                    format: 'hh:mm:ss',
                    istime: true,
                    istoday: false,
                    choose: function (datas) {
                        start.max = datas;  //结束日选好后, 重置开始日的最大日期
                    }
                };

                $('.begin-date').click(function () {
                    start.elem = this;
                    laydate(start);
                });
                $('.end-date').click(function () {
                    end.elem = this;
                    laydate(end);
                });

            });
        }


        layerInit();
        leSubmit();
        verifyDate();
//<script>

    function success() {
        location.reload();

    }
    
    function closeLayer() {
        parent.layer.closeAll();
        parent.location.reload();
    }

    var fromTimeBox = $("#startTime");
    var toTimeBox = $("#endTime");
    //时间初始化
    fromTimeBox.val("00:00:00");
    toTimeBox.val("00:00:00");
    //控件设置
    fromTimeBox.timepicker({
        showSecond: true,
        timeFormat: 'hh:mm:ss',
        stepHour: 1,
        stepMinute: 1,
        stepSecond: 1,
        onClose: function (dateText, inst) {
            if(fromTimeBox.val() == null || fromTimeBox.val() == ''){
                fromTimeBox.val("00:00:00");
            }
            if (toTimeBox.val() != '') {
                var testStartDate = new Date(toTimeBox.datetimepicker('getDate').getTime());
                var testEndDate = new Date($(this).datetimepicker('getDate').getTime());
                if (testStartDate < testEndDate) {
                    toTimeBox.val(dateText);
                }
            } else {
                toTimeBox.val(dateText);
            }
        },
        onSelect: function (dateText) {
            var time = new Date($(this).datetimepicker('getDate').getTime());
            $("#endTime").timepicker('option', 'minDateTime', time);
        }
    });
    toTimeBox.timepicker({
        showSecond: true,
        timeFormat: 'hh:mm:ss',
        stepHour: 1,
        stepMinute: 1,
        stepSecond: 1,
        onClose: function (dateText, inst) {
            var startDate = new Date(fromTimeBox.datetimepicker('getDate').getTime());
            var endDate = new Date(toTimeBox.datetimepicker('getDate').getTime());
            var zeroDate = new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate());
            if (endDate > startDate) {
                var duration = (endDate - startDate) / 1000 ;
                $("#duration").val(duration);
                //开始时间相对源文件的偏移 单位：秒
                $("input[name='startTimeOffset']").val((startDate-zeroDate) / 1000);
                $("input[name='endTimeOffset']").val((endDate - zeroDate) / 1000);
            }

        },
        onSelect: function (dateText) {
//            var time = new Date($(this).datetimepicker('getDate').getTime());
//            $('#startTime').timepicker('option', 'maxDateTime',time);
        }
    });

    //用源视频时长限制时间的选择
//    var videoDuration;
//    var baseDate = new Date(fromTimeBox.datetimepicker('getDate').getTime());
//    var maxDateTime = null;
//    videoDuration = $("#videoDuration").val();   //单位：秒
//    if (videoDuration != null && videoDuration != '') {
//        maxDateTime = new Date(baseDate.getTime() + videoDuration * 1000);
//    }
//    fromTimeBox.timepicker('option', 'maxDateTime', maxDateTime);
//    toTimeBox.timepicker('option', 'maxDateTime', maxDateTime);

//    //点播播放器配置
//    var vu = "null";
//    cloudConfig = {
//        type:'video',
//        callbackJs:"call",
//        uu:"",
//        vu:vu,
//        pu:"78a338d987",
//        skinnable:1,
//        fullscreen:1,
//        posterType:2,
//        autoSize:1,
//        controls:0,
//        rate:350,
//        x5Type:"h5",
//        playsinline:1,
//        autoReplay:1
//    };
//    <!--点播js-->
//    try{
//        var player = new ClouddPlayer();
//        player.init(cloudConfig,"le-video");
//    }catch(err){}

    //设置视频宽高比
    $().ready(function(){
        var realWidth = $('#le-video').width();
        $('#le-video').height( realWidth * 9 / 16);
        $('#le-video embed').height( realWidth * 9 / 16);

        //关闭该页 父页面刷新
        var closeButton = $(".layui-layer-setwin");
        console.log(closeButton);
        closeButton.click(function () {
            alert("click");
            parent.location.reload();
        });
    });

    //腾讯云点播
    var cloud_type = "";
    if (cloud_type == 'qcloud') {
        var player = new qcVideo.Player("id_video_container", {
            "file_id": "",
            "app_id": "1254040044",
            "width": 640,
            "height": 480
        });
    }

    //</script>    
 </body>
</html>